<div class="modal-editor">
  <button nz-button (click)="close()" nzType="primary" class="close-button" nzShape="circle"><span nz-icon nzType="close" nzTheme="outline"></span></button>

  <ng-container *ngIf="$any(card).thingType === cardsType.MARKDOWN">
    <app-markdown-card class="modal-editor-left-column markdown" [content]="$any(card).markdown" [cardMode]="false" [id]="$any(card).id"
                       [readonly]="false" (needSave)="saveAuto($event)">

    </app-markdown-card>
  </ng-container>
  <ng-container *ngIf="$any(card).thingType === cardsType.LINK">
    <div class="modal-editor-left-column" [ngStyle]="{'background': 'url('+ $any(card).image + ') no-repeat center center, linear-gradient(#00467f, #a5cc82) fixed',
       'background-size': 'cover'}">
      <div class="description">
        <p nz-typography nzEllipsis nzEllipsisRows="20">{{$any(card).desc}}</p>
        <a nz-typography nzEllipsis href="{{$any(card).url}}" target="_blank" (click)="$event.stopPropagation()" class="link">{{$any(card).url}}</a>
      </div>
    </div>
  </ng-container>
  <ng-container *ngIf="$any(card).thingType === cardsType.TWEET">
    <div class="modal-editor-left-column tweet-content">
      <img src="../../../assets/image/twitter_logo.png" alt="twitter logo" class="card-image-content tweet-image">

      <div [innerHTML]="$any(card).html"></div>
    </div>
  </ng-container>
  <div class="modal-editor-right-column">
    <nz-form-label class="modal-editor-right-column-label label">title</nz-form-label>
    <input nz-input placeholder="title" [(ngModel)]="title" (ngModelChange)="saveAuto(true)" [ngModelOptions]="{ updateOn: 'blur' }"/>
    <nz-form-label class="modal-editor-right-column-label label">Tags</nz-form-label>
    <app-tags-input [(tags)]="tags" (tagsChange)="saveAuto(true)"></app-tags-input>
    <nz-form-label class="modal-editor-right-column-label label">Comment</nz-form-label>
    <nz-form-item>
      <nz-form-control>
        <nz-textarea-count [nzMaxCharacterCount]="100">
          <textarea rows="4" [(ngModel)]="comment" (ngModelChange)="saveAuto(true)"  [ngModelOptions]="{ updateOn: 'blur' }" placeholder="comment" nz-input></textarea>
        </nz-textarea-count>
      </nz-form-control>
    </nz-form-item>
  </div>
</div>
<div class="modal-editor-actions">
  <button nz-button (click)="updateAndClose()" [nzLoading]="isSaving" nzType="primary" nzShape="circle"><span nz-icon nzType="save" nzTheme="outline"></span></button>
  <button nz-button (click)="delete($any(card).id)" nzType="primary" nzDanger nzShape="circle"><span nz-icon nzType="delete" nzTheme="outline"></span>
  </button>
</div>
